<template>
  <div class="calendar-container">
    <el-calendar v-model="currentDate">
      <template slot="dateCell" slot-scope="{ data }">
        <div class="calendar-day" @click="showDayDetail(data.day)">
          <div class="solar-date">{{ getDay(data.day) }}</div>
          <div class="holiday-date" v-if="getHoliday(data.day)">{{ getHoliday(data.day) }}</div>
          <div class="lunar-date">{{ getLunarDate(data.day) }}</div>
          <div v-if="hasFestival(data.day)" class="festival-tag">
            {{ getFirstFestival(data.day) }}
          </div>
          <div v-if="hasSolarTerm(data.day)" class="solar-term-tag">
            {{ getSolarTerm(data.day) }}
          </div>
        </div>
      </template>
    </el-calendar>

    <el-dialog :visible.sync="detailVisible" title="老黄历" width="600px" custom-class="calendar-detail-dialog">
      <div v-if="currentDetail" class="detail-content">
        <!-- 顶部日期信息 -->
        <div class="detail-header">
          <h3>{{ formatChineseDate(currentDetail.solarDate) }}</h3>
          <div class="date-tags">
            <el-tag type="info">{{ currentDetail.constellation }}</el-tag>
            <el-tag :type="currentDetail.animal === '龙' ? 'danger' : 'warning'">
              {{ currentDetail.animal }}年
            </el-tag>
          </div>
        </div>

        <!-- 主要信息卡片 -->
        <div class="detail-cards">
          <!-- 农历信息卡片 -->
          <el-card shadow="hover" class="info-card">
            <div slot="header" class="card-header">
              <i class="el-icon-date"></i>
              <span>农历信息</span>
            </div>
            <div class="card-content">
              <p><span class="label">农历日期：</span>{{ currentDetail.lunarDate }}</p>
              <p><span class="label">干支：</span>{{ currentDetail.ganZhi }}</p>
            </div>
          </el-card>

          <!-- 节日节气卡片 -->
          <el-card shadow="hover" class="info-card" v-if="currentDetail.festivals?.length || currentDetail.solarTerms">
            <div slot="header" class="card-header">
              <i class="el-icon-collection-tag"></i>
              <span>节日节气</span>
            </div>
            <div class="card-content">
              <div v-if="currentDetail.festivals?.length">
                <p class="label">节日：</p>
                <div class="festival-list">
                  <el-tag v-for="(festival, index) in currentDetail.festivals" :key="index" type="danger" size="small">
                    {{ festival }}
                  </el-tag>
                </div>
              </div>
              <p v-if="currentDetail.solarTerms">
                <span class="label">节气：</span>
                <el-tag type="success">{{ currentDetail.solarTerms }}</el-tag>
              </p>
            </div>
          </el-card>
        </div>

        <!-- 宜忌信息 -->
        <div class="yi-ji-container">
          <el-card shadow="hover" class="yi-ji-card yi">
            <div slot="header" class="card-header">
              <i class="el-icon-check"></i>
              <span>宜</span>
              <span class="item-count">{{ currentDetail.luckyThings?.length || 0 }}项</span>
            </div>
            <ul>
              <li v-for="(item, index) in currentDetail.luckyThings" :key="'yi' + index">
                <i class="el-icon-circle-check"></i>
                <span>{{ item }}</span>
              </li>
              <li v-if="!currentDetail.luckyThings?.length" class="empty-item">无</li>
            </ul>
          </el-card>

          <el-card shadow="hover" class="yi-ji-card ji">
            <div slot="header" class="card-header">
              <i class="el-icon-close"></i>
              <span>忌</span>
              <span class="item-count">{{ currentDetail.unluckyThings?.length || 0 }}项</span>
            </div>
            <ul>
              <li v-for="(item, index) in currentDetail.unluckyThings" :key="'ji' + index">
                <i class="el-icon-circle-close"></i>
                <span>{{ item }}</span>
              </li>
              <li v-if="!currentDetail.unluckyThings?.length" class="empty-item">无</li>
            </ul>
          </el-card>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { GetMonthData, GetDayDetail } from '../../wailsjs/go/controller/Rili'

export default {
  setup() {
    const currentDate = ref(new Date())
    const monthData = ref({})
    const currentDetail = ref(null)
    const detailVisible = ref(false)

    // 获取月份数据
    const fetchMonthData = async (date) => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      try {
        const data = await GetMonthData(year, month)
        monthData.value = data || {}
        console.log('当月数据:', monthData.value)
      } catch (error) {
        console.error('获取月份数据失败:', error)
        monthData.value = {}
      }
    }

    // 初始化加载当前月份数据
    onMounted(() => {
      fetchMonthData(currentDate.value)
    })

    // 监听月份变化
    watch(currentDate, (newVal) => {
      fetchMonthData(newVal)
    })

    // 获取日期数字
    const getDay = (dateStr) => {
      const date = new Date(dateStr)
      return date.getDate()
    }

    // 获取农历日期
    const getLunarDate = (dateStr) => {
      const date = new Date(dateStr)
      const key = formatDateKey(date)
      const lunarData = monthData.value[key]
      if (!lunarData) return ''
      return lunarData.lunarDate || ''
    }

    //获取假期
    const getHoliday = (dateStr) => {
      const date = new Date(dateStr)
      const key = formatDateKey(date)
      const holidayData = monthData.value[key]
      if (!holidayData) return ''
      return holidayData.workdayStatus || ''
    }

    // 格式化中文日期显示
    const formatChineseDate = (dateStr) => {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    }

    // 是否有节日
    const hasFestival = (dateStr) => {
      const date = new Date(dateStr)
      const key = formatDateKey(date)
      return monthData.value[key]?.festivals?.length > 0
    }

    // 获取第一个节日
    const getFirstFestival = (dateStr) => {
      const date = new Date(dateStr)
      const key = formatDateKey(date)
      const festivals = monthData.value[key]?.festivals
      return festivals && festivals.length > 0 ? festivals[0] : ''
    }

    // 是否有节气
    const hasSolarTerm = (dateStr) => {
      const date = new Date(dateStr)
      const key = formatDateKey(date)
      return !!monthData.value[key]?.solarTerms
    }

    // 获取节气
    const getSolarTerm = (dateStr) => {
      const date = new Date(dateStr)
      const key = formatDateKey(date)
      return monthData.value[key]?.solarTerms || ''
    }
    // 显示日期详情
    const showDayDetail = async (dateStr) => {
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()

      try {
        const detail = await GetDayDetail(year, month, day)
        console.log('日期详情:', detail)

        // 确保数据格式正确
        currentDetail.value = {
          ...detail,
          festivals: Array.isArray(detail.festivals) ? detail.festivals : [],
          luckyThings: Array.isArray(detail.luckyThings) ? detail.luckyThings : [],
          unluckyThings: Array.isArray(detail.unluckyThings) ? detail.unluckyThings : []
        }
        detailVisible.value = true
      } catch (error) {
        console.error('获取日期详情失败:', error)
      }
    }

    // 格式化日期key
    const formatDateKey = (date) => {
      return date.toISOString().split('T')[0]
    }

    return {
      currentDate,
      monthData,
      currentDetail,
      detailVisible,
      getHoliday,
      getDay,
      getLunarDate,
      hasFestival,
      getFirstFestival,
      hasSolarTerm,
      getSolarTerm,
      showDayDetail,
      formatChineseDate
    }
  }
}
</script>

<style scoped>
/* 保持原有样式不变 */
.calendar-container {
  padding: 20px;
  height: 100%;
}

.calendar-day {
  height: 100%;
  padding: 8px;
  position: relative;
  /* 确保可以接收点击事件 */
  pointer-events: auto;
  cursor: pointer;
}

.solar-date {
  font-size: 16px;
  font-weight: bold;
  z-index: 1;
  /* 确保日期在最上层 */
}

.lunar-date {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  z-index: 1;
}

.holiday-date {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  color: white;               /* 白色文字 */
  background-color: #f56c6c;  /* 红色背景 */
  padding: 1px 4px;           /* 增加一点内边距 */
  border-radius: 10px;        /* 更大的圆角 */
  font-weight: bold;          /* 加粗字体 */
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 轻微阴影增加立体感 */
}
.festival-tag {
  position: absolute;
  bottom: 18px;
  /* 调整位置，留出横线空间 */
  left: 2px;
  background-color: #4ba3df;
  color: white;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 12px;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* 节气标签样式 */
.solar-term-tag {
  position: absolute;
  bottom: 18px;
  /* 调整位置，留出横线空间 */
  right: 2px;
  background-color: #67c23a;
  color: white;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 12px;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* 详情弹窗样式 */
.detail-content {
  padding: 0 10px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.detail-header h3 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.date-tags .el-tag {
  margin-left: 8px;
}

/* 信息卡片样式 */
.detail-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.info-card {
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.card-header i {
  margin-right: 8px;
  font-size: 16px;
}

.card-content {
  line-height: 1.8;
}

.label {
  color: #909399;
  margin-right: 5px;
}

.festival-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

/* 宜忌卡片样式 */
.yi-ji-container {
  display: flex;
  flex-direction: row;
  /* 横向排列 */
  gap: 20px;
  /* 卡片间距 */
  margin-top: 20px;
}

.yi-ji-card {
  flex: 1;
  /* 等分宽度 */
  min-width: 0;
  /* 防止内容溢出 */
}

.yi-ji-card ul {
  display: flex;
  flex-wrap: wrap;
  /* 允许内容换行 */
  gap: 10px;
  /* 内容项间距 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.yi-ji-card li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  white-space: nowrap;
  /* 防止文字换行 */
}

.yi-ji-card.yi li {
  border-left: 3px solid #67c23a;
}

.yi-ji-card.ji li {
  border-left: 3px solid #f56c6c;
}

.empty-tip {
  color: #c0c4cc;
  font-style: italic;
}

/* 响应式调整 */
@media (max-width: 768px) {

  .detail-cards,
  .yi-ji-container {
    grid-template-columns: 1fr;
  }
}
</style>


<style>
/* 全局弹窗样式 */
.calendar-detail-dialog {
  border-radius: 10px !important;
}

.calendar-detail-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.calendar-detail-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.calendar-detail-dialog .el-dialog__body {
  padding: 20px !important;
}
</style>